Less 安装与简介

2022-04-21
css less

Less与sass、stylus的区别之处在于支持浏览器支持，Less官方为此推出了专门的less.js，用于处理.less语法，并将此转换为浏览器可认知的语法格式。而Sass、stylus之类的只能通过使用node.js来进行预处理，或者你可以通过使用相关语法转换为.css，这都是以上语言所支持的。

Less与Sass、Stylus等CSS扩展语言一样，都支持变量、函数以及Mixin等特征，使得CSS更加容易维护可扩展，而Less虽然语法上没有Sass、Stylus等具有特征，但支持浏览器支持是他的特点之一。

npm

通常安装 less 的方法可以通过使用脚手架进行安装，即npm install -g less来进行全局安装，通过 less 可将 .less转换为.css文件：

1	less styles.less styles.css

通过 lessc 来进行转换为 css

将.less转换为.css，则需要使用lessc style.less style.css来进行转换，转换后的信息如下：

[root@kunlun less]# lessc style.less style.css
[root@kunlun less]# more style.css 
p {
  color: red;
}
[root@kunlun less]# more style.less 
@red: red;
p {
        color: @red;
}

lessc 不存在

如果lessc不存在的话可通过在 node_modules即Node模块中下载是否存在，可使用sudo find / -name lessc来搜索less文件是否存在。如果存在则可通过下方命令进行建立：

1	ln -s {user}node_modules/less/bin/lessc /usr/local/bin/lessc

将{user}替换为你的node_modules之前的目录即可，之后通过使用lessc来检测是否关联成功。

浏览器支持

下载

Lass的浏览器支持需要引入官方的lass.js文件来进行渲染，lass与其他css扩展的区别就是可以在非node.js环境中运行(主要是因为node.js支持欲渲染功能)。

通过“https://codeload.github.com/less/less.js/zip/master”来进行下载，解压缩后将```dist/less.js```文件引入到项目文件中即可。

使用

本文通过使用 Laravel 框架进行运行(也可支持将扩展名改为.html)，并通过引入less.js来进行支持.less渲染：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Hello</title>
    <link rel="stylesheet" type="text/less" href="less/style.less">
    <script src="js/less.js"></script>
</head>
<body>
    <p>Hello</p>
</body>
</html>

@red: red;

p {
    color: @red;
}

⬅️ Go back